<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
 <div id="app">
   <h2 align="center">{{info}}</h2>
    <el-table
        :data="books"
        border
        style="width:910px"
        
       >
    <el-table-column
        prop="f_id"
        label="书号"
        width="180"
        align="center">
    </el-table-column>
    <el-table-column
        prop="f_title"
        label="书名"
        width="180"
        align="center">
    </el-table-column>
    <el-table-column
        prop="f_author"
        label="作者"
        width="180"
        align="center">
    </el-table-column>
    <el-table-column
        prop="f_type"
        label="类型"
        width="180"
        align="center">
    </el-table-column>
    <el-table-column
        prop="f_price"
        label="价格"
        width="180"
        align="center">
    </el-table-column>
  </el-table>
      <div>总价格：￥{{totalPrice}}</div>
    
    
</div>

<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
   <!-- 引入样式 -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <!-- 引入组件库 -->
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    let vm =new Vue({
        el:'#app',
        data:{
            info:'图书信息管理',
            books:[],//图书数组，保存数据库中的图书记录
            path:'http://localhost:44355/content/img/',
        },

        //计算属性
         computed:{
            totalPrice(){
                let sum=0;
                this.books.forEach(bk => sum +=bk.f_price)
                return sum;
                    
                },
            },
         
        //自定义方法
        methods:{
            f1(){
                let _this = this
                axios.get('http://localhost:44355/Book/Index')
                .then(function(rs){
                    console.log(rs)

                    // console.log('111')
                    _this.books=rs.data
                })
            },
        },
        //生命周期：类似webfrom 的 xx_load()
        created(){
            this.f1()
        },
    })
</script>


</body>


</html>